<template>
  <transition name="move" appear>
    <div class="b-message" v-if="visible">
      {{ message }}
    </div>
  </transition>
</template>

<script>
export default {
  name: "BMessage",
  props: {
    message: {
      type: String,
      default: "我是一段消息提示文本",
    },
    visible: {
      type: Boolean,
      default: false,
    },
    duration: {
      type: Number,
      default: 3000,
    },
  },
  mounted() {
    this.autoClose();
  },
  methods: {
    // 自动关闭 消息提示组件
    autoClose() {
      if (this.duration !== 0) {
        setTimeout(() => {
          this.close();
        }, this.duration + 800);
      }
    },
    // 通知父组件，关闭消息提示
    close() {
      // this.visible = false
      // 符合sync修饰符的自定义事件名称，父组件可以通过sync修饰符监听这个事件
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="less">
.b-message {
  position: fixed;
  top: 15px;
  left: 0;
  right: 0;
  width: 30%;
  height: 40px;
  line-height: 40px;
  padding: 5px 10px;
  margin: auto;
  background: skyblue;
  color: #fff;
  // 动画进入时
  &.move-enter,
  &.move-leave-to {
    opacity: 0;
    transform: translateY(-20px);
  }
  // 动画持续时
  &.move-enter-active,
  &.move-leave-active {
    transition: 0.8s linear;
  }
}
</style>
